<script setup lang="ts" >
import { ref } from "vue";
import { Notify } from "vant";
import { isPhone } from "../utils/fuc";
import { UserLogin, UserRegister } from "../api/user";
import { useRouter } from "vue-router";
const router = useRouter();
const isregister = ref<boolean>(false);
const isloginClick = () => {
  isregister.value = false;
};
const isRegisterClick = () => {
  isregister.value = true;
};
let password = ref<string>("");
let phone = ref<string>("");

const submit = (isRegister: boolean) => {
  if (!isPhone(phone.value)) {
    Notify({ type: "warning", message: "手机号码格式有误，请重填" });
    return;
  }
  if (password.value.length < 6) {
    Notify({ type: "warning", message: "密码格式有误，请重填" });
    return;
  }
  if (isRegister) {
    // 发起注册
    UserRegister({
      phone: phone.value,
      password: password.value,
    }).then((res) => {
      console.log(res);
      isregister.value = false;
      Notify({ type: "success", message: "注册成功,快去登入吧" });
    });
  } else {
    // 发起登入的接口
    UserLogin({
      phone: phone.value,
      password: password.value,
    }).then((res) => {
      Notify({ type: "success", message: "登入成功" });
      localStorage.setItem("phone", phone.value);
      localStorage.setItem("access_token", (res.data as any).token);
      router.push({ name: "personal" });
    });
  }
};
</script>

<template>
  <div class="loginContainer">
    <div class="bg-img">
      <img src="/img/bg.jpeg" alt="bg.jpeg" />
      <div class="big-text">ONE 一个</div>
      <div class="small-text">ONE IS ALL</div>
    </div>
    <div class="bottom">
      <div class="desc">{{ !isregister ? "密码登入" : "快速注册" }}</div>
      <div class="input">
        <van-field
          v-model="phone"
          left-icon="graphic"
          placeholder="请输入手机号码"
        />
        <van-field
          v-model="password"
          type="password"
          left-icon="lock"
          placeholder="请输入密码"
        />
      </div>
      <div class="button" @click="submit(isregister)">
        {{ !isregister ? "登入" : "注册" }}
      </div>
      <div class="options">
        <div :class="isregister ? 'option-item' : ''" @click="isloginClick">
          快速登入
        </div>
        <div :class="!isregister ? 'option-item' : ''" @click="isRegisterClick">
          注册
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.loginContainer {
  .bg-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    img {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 220px;
    }
  }
  .big-text {
    margin-top: 100px;
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: 600px;
  }
  .small-text {
    text-align: center;
    color: #fff;
    letter-spacing: 10px;
    font-weight: 500px;
  }
  .van-icon {
    font-size: 30px;
    color: #666;
  }
  .van-cell__value {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 7px;
  }
  .bottom {
    margin: 20px;
    .desc {
      margin-top: 30px;
    }
    .input {
      margin-top: 80px;
    }
    .button {
      width: 250px;
      height: 50px;
      margin: 30px auto;
      text-align: center;
      background: #888;
      color: #fff;
      border-radius: 10px;
      line-height: 50px;
    }
    .options {
      display: flex;
      justify-content: space-between;
      .option-item {
        text-decoration: underline;
      }
    }
  }
}
</style>